<template>
  <div class="page-home-films">
    <div class="city" @click="fn1">{{cityname}}<i class="iconfont iconarrow-left"></i></div>
    <lv-swiper class="swiper" :slides="bannerList"></lv-swiper>
    <wr-tabs v-model="curTabIndex" :tabs="['正在热映', '即将上映']"></wr-tabs>
    <router-view></router-view>
  </div>
</template>

<script>
import Swiper from '@/components/Swiper'
import { getBannerList } from '@/api/film'
import Tabs from '../../components/Tabs'
export default {
  name: 'Films',
  components: {
    [Swiper.name]: Swiper,
    [Tabs.name]: Tabs
  },
  data () {
    return {
      bannerList: [],
      curTabIndex: this.$route.name === 'nowPlaying' ? 0 : 1,
      cityname: ''
    }
  },
  watch: {
    curTabIndex (newVal) {
      let name = newVal === 0 ? 'nowPlaying' : 'comingSoon'
      this.$router.replace({ name })
    }
  },
  created () {
    this.cityname = window.localStorage.getItem('cityname')
    getBannerList({
      type: 2,
      cityId: 440300,
      k: 8601288
    }).then(response => {
      let res = response.data
      if (res.status === 0) {
        this.bannerList = res.data.map(item => item.imgUrl)
      }
    })
  },
  methods: {
    fn1 () {
      this.$router.push('/city')
    }
  }
}
</script>

<style lang="scss">
.page-home-films {
  .city{
    position: absolute;
    z-index: 999;
    background: rgb(255,255,255,0.2);
    width: 49px;
    height: 32px;
    top: 20px;
    left: 15px;
    border-radius: 10px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    font-size:14px
  }
  .swiper {
    .swiper-pagination-bullet-active {
      background: #ffffff;
    }
  }
}
</style>
